<template>
    <div class="user-info">
        <wx-hide-menu></wx-hide-menu>
<!--        <wx-share-body v-if="shareBody && Object.keys(shareBody).length > 0" :shareBody="shareBody"></wx-share-body>-->
        <no-data style="height: 100vh;" v-if="firstPageMsg && Object.keys(firstPageMsg).length == 0"></no-data>
        <swiper style="height: 100vh;" v-else-if="firstPageMsg && Object.keys(firstPageMsg).length > 0"
            :options="wrapSwiperOption" ref="mySwiper" id="mySwiper">
            <!-- slides -->
            <swiper-slide class="positionR">
                <!--<full-height-video></full-height-video>-->
                <!--<full-height-swiper></full-height-swiper>-->
                <div class="first-page-cmsg">
                    <img class="positionAbCenter first-page-blur" :src="firstPageMsg.photo" alt="">
                    <div class="user-info-msg">
                        <img @click="backHref" class="user-info-back border-radius50"
                            :class="{'user-info-self':userId == visitId}"
                            src="../../assets/images/user/icon_right_assass.png" alt="">
                    </div>
                    <div v-if="selfIntroduction && Object.keys(selfIntroduction).length > 0">
                        <!--TODO 第一个swiper的页码-->
                        <!--<span class="fc-swiper-wpagination" v-if="selfIntroduction.mediaType == 1 && selfPicMsg && selfPicMsg.length > 0">-->
                        <!--<span class="fc-swiper-pagination">-->
                        <!--<span >{{selfIntroduction.swiperIndex}}</span>/{{pageMsg.mediaContents.length}}-->
                        <!--</span>-->
                        <!--</span>-->
                        <full-height-video :data-videoIndex="0" ref="fullVideo"
                            v-if="selfIntroduction && selfIntroduction.mediaType == 0 && selfVideoMsg && Object.keys(selfVideoMsg).length > 0"
                            :videoPropsMsg=selfVideoMsg>
                        </full-height-video>
                        <!--@change-end-cb="nowIndex"-->
                        <full-height-swiper
                            v-else-if="selfIntroduction && selfIntroduction.mediaType == 1 && selfPicMsg && Object.keys(selfPicMsg).length > 0"
                            :FHSwiperMsg=selfPicMsg>
                        </full-height-swiper>
                    </div>
                </div>
                <div class="user-info-wmsg" v-if="firstPageMsg && Object.keys(firstPageMsg).length > 0">
                    <img class="displayBlock width-full shaped-img" src="../../assets/images/user/shaped_img.png"
                        alt="">
                    <img v-if="firstPageMsg.photo" class="user-info-userheader border-radius50"
                        :src="firstPageMsg.photo" alt="">
                    <img v-else class="user-info-userheader border-radius50"
                        src="../../assets/images/common/default_header.png" alt="">
                    <div class="displayFlex justifyCtBwt info-wname">
                        <div class="info-name">{{firstPageMsg.nickName}}</div>
                        <template v-if="userId != visitId">
                            <span class="user-info-attention" v-if="!firstPageMsg.hadConcernedUser"
                                @click="doAttention(0)">
                                <img class="add-attention-icon" src="../../assets/images/common/icon_white_add.png"
                                    alt="">关注
                            </span>
                            <span v-else class="user-info-attention already-attention"
                                @click="cancleAttention(0,visitId)">已关注</span>
                        </template>
                        <span class="positionR" @click="openHKHWConfirm('添加/更新个人介绍需要下载好看好玩')" v-else>
                            <span class="self-des-wrap">
                                更换自我介绍
                            </span>
                            <span class="positionR">
                                <span class="self-down-assass"></span>
                                <img v-if="selfIntroduction && Object.keys(selfIntroduction).length > 0" class="add-des"
                                    src="../../assets/images/user/add_icon.png" alt="">
                                <img v-else class="add-des" @click="" src="../../assets/images/user/fresh_self_msg.png"
                                    alt="">
                            </span>
                        </span>
                    </div>
                    <div class="info-bottom-warp displayFlex justifyCtArd">
                        <div class="info-bottom-item flex1">
                            {{firstPageMsg.works}}
                            <p class="user-item">作品</p>
                        </div>
                        <div class="info-bottom-item flex1">
                            {{firstPageMsg.likeNum}}
                            <p class="user-item">喜欢</p>
                        </div>
                        <div class="double-wassass">
                            <img class="double-assass" src="../../assets/images/user/double_assass.png" alt="">
                        </div>
                        <div class="info-bottom-item flex1">
                            {{firstPageMsg.fans}}
                            <p class="user-item">粉丝</p>
                        </div>
                        <div class="info-bottom-item flex1">
                            {{firstPageMsg.concernedUserNum}}
                            <p class="user-item">关注</p>
                        </div>
                    </div>
                </div>
            </swiper-slide>
            <template v-if="worksList && worksList.length > 0">
                <swiper-slide class="positionR" v-for="(pageMsg,key) in worksList" :key="key">
                    <div class="look-index-mood">
                        <div class="width-full">
                            <span class="fc-swiper-wpagination">
                                <!--好看没有定位功能-->
                                <span class="fc-swiper-pagination"
                                    v-if="pageMsg && pageMsg.mediaType == 1 && pageMsg.mediaContents[0].url && pageMsg.mediaContents.length > 0">
                                    <span
                                        id="activeIndex">{{worksList[key].swiperIndex}}</span>/{{pageMsg.mediaContents.length}}
                                </span>
                            </span>
                            <p class="look-index-mood-text" v-if="pageMsg.mediaComment">
                                {{pageMsg.mediaComment}}
                            </p>
                            <share-collect-speak ref="shareCollectSpeak" @isLike="isLike" @doComment="doComment"
                                @deleteComment="deleteComment" @getUserMainComment="getUserMainComment"
                                @getSubCommentList="getSubCommentList" @showShare="showShare = true"
                                :commentListProps="commentListProps" :shareCollectSpeak="shareCollectSpeakList[key]">
                            </share-collect-speak>
                        </div>
                    </div>
                    <user-info-header ref="userInfoHeader" @doAttention="doAttention" @toBack="toBack"
                        v-if="worksMedioList[key] && Object.keys(worksMedioList[key].belongUserInfo)"
                        :productionHeaderProp="worksMedioList[key].belongUserInfo">
                    </user-info-header>
                    <!--v-if="pageMsg.mediaComment"-->
                    <!--<p class="look-index-mood-text positionR" >-->
                    <!--<span ref="mediaCommentTextId" class="media-comment-text">-->
                    <!--{{pageMsg.mediaComment}}好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好-->
                    <!--</span>-->
                    <!--</p>-->
                    <full-height-video :data-videoIndex="key+1" ref="fullVideo" v-if="pageMsg && pageMsg.mediaType == 0"
                        :videoPropsMsg=worksMedioList[key]></full-height-video>
                    <full-height-swiper v-else-if="pageMsg && pageMsg.mediaType == 1" :FHSwiperMsg=worksMedioList[key]
                        @change-end-cb="nowIndex"></full-height-swiper>

                </swiper-slide>
            </template>
        </swiper>
        <v-share v-if="showShare" @clickFn="showShare = false"></v-share>
    </div>
</template>

<script>
import Look from '../../assets/js/look/look'
/*放着里是因为WeixinJSBridgeReady的监听*/
let isPlay = false;
let timer = null;
document.addEventListener('WeixinJSBridgeReady', function () {
    if (Vue.prototype.isIphone) {
        let tempI = 0;
        let tempTimer = setInterval(() => {
            if ($("video").length > 0 && tempI < 100) {
                clearInterval(tempTimer);
                isPlay = true;
            } else {
                if (tempI >= 100) {
                    clearInterval(tempTimer);
                }
                tempI++;
            }
        }, 10)
        playVideo();
        function playVideo () {
            timer = setTimeout(() => {
                $("video").each(function (index, ele) {
                    isPlay = true;
                    $("video").eq(index)[0].play();
                    setTimeout(() => {
                        $('video').eq(index)[0].pause();
                    }, 10)
                });
                if (!isPlay) {
                    playVideo();
                }
            }, 100)
        }
    }
});
export default {
    name: "UserInfo",
    data () {
        return {
            wrapSwiperOption: {
                direction: 'vertical',
                autoplay: false,
                fade: {/*配合onTransitionEnd解决滑动之后有时不触发slide结束的bug*/
                    crossFade: true,
                },
                onInit: function (swiper) {
                    setTimeout(() => {
                        this.swiperSlideEnd(swiper.activeIndex, true);
                    }, 600)
                }.bind(this),
                onTransitionEnd: function (swiper) {
                    this.swiperSlideEnd(swiper.activeIndex);
                    /*第一个swiper是固定的，所以多一个*/
                    if (swiper.activeIndex == this.pageSize) {
                        this.openHKHWConfirm('查看更多需要下载好看好玩');
                    }
                }.bind(this),
            },
            userInfo: false,
            visitId: 0,//被查看者id
            firstPageMsg: {},
            showShare: false,//分享
            shareBody:{},
            selfIntroduction: {
                // userId:0,
                // mediaType:0,//0是视频，1是图片
                // mediaContents:[],
            },
            nowSwiperIndex: 0,//当前页面的swiper
            selfVideoMsg: {},
            selfPicMsg: {},
            pageNum: 1,//个人作品的页数
            pageSize: 10,//个人作品的条数
            worksMedioList: [],
            worksList: [],
            commentListProps: {},//评论弹出框的数据
            shareCollectSpeakList: [],
            commentKey: 0,
            commentPageNum: 0,
            commentPageSize: 10,
            commentType: 0,
        }
    },
    created () {
        this.visitId = this.$route.query.visitId || 0;
        this.getFirstPage();
        this.getSelfIntroduction();
    },
    methods: {
        /*获取本人主页和他人主页基本信息*/
        getFirstPage () {
            let url = `${this.NW_API_API_LOCALE_VERSION}/user/homepage/basic/${this.userId}/userHomePage/${this.visitId}/info`;
            this.xurl.get(url).then((data) => {
                if (data.success) {
                    this.firstPageMsg = data.result;
                    setTimeout(()=>{
                        document.title = this.firstPageMsg ? this.firstPageMsg.nickName : '个人中心'
                    },1000)
                    // let tempShare = {
                    //     title:this.firstPageMsg ? this.firstPageMsg.nickName : '个人中心',
                    //     content:this.firstPageMsg ? this.firstPageMsg.nickName +'的个人中心' : '个人中心',
                    //     photo:this.firstPageMsg.photo || this.staticImageUrl('images/home/haokanhaowan_logo.png')
                    // }
                    // this.shareBody = Object.assign({},tempShare);
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '获取个人信息出错' });
                }
            })
        },
        /*获取个人介绍*/
        getSelfIntroduction () {
            let self = this.$route.query.self ? true : this.$route.query.visitId == this.userId ? true : false
            let url = `${this.NW_API_API_LOCALE_VERSION}/user/homepage/getById/${this.$route.query.visitId}/${self}`;
            this.xurl.get(url).then((data) => {
                if (data.success) {
                    this.selfIntroduction = data.result;
                    this.dealSelfMedio(data.result)
                    this.getUserMsg();
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '获取个人介绍出错' });
                }
            })
        },
        /*返回到第一个swiper*/
        toBack () {
            this.$refs.mySwiper.swiper.slideTo(0, 500, false);//切换到第一个slide，速度为500ms
        },
        /*获取用户作品信息*/
        getUserMsg (obj) {
            let that = this;
            this.pageNum = obj && obj.pageNum ? obj.pageNum : this.pageNum;
            let url = `${this.NW_API_API_LOCALE_VERSION}/media/info/${this.userId}/query4HomePage/pageSize/${this.pageSize}/pageNum/${this.pageNum}/${this.visitId}`;
            this.xurl.get(url).then((data) => {
                this.dealMeidio(data.list, obj);
                this.dealShareCollectSpeak(data.list);
                for (let value in data.list) {
                    data.list[value].swiperIndex = 1;
                }
                that.worksList = data.list;
            })
        },
        dealSelfMedio (msg) {
            if (msg && Array.isArray(msg.mediaContents) && msg.mediaContents.length > 0) {
                if (msg && msg.mediaType == 0) {
                    let tempObj = {
                        videoUrl: msg.mediaContents[0].url
                    }
                    this.selfVideoMsg = Object.assign({}, this.selfVideoMsg, tempObj)
                } else if (msg && msg.mediaType == 1) {
                    let tempArray = [];
                    let tempObj = {};
                    for (let value of msg.mediaContents) {
                        tempArray.push(value.url);
                    }
                    tempObj = {
                        imagesList: tempArray,
                        needBlur: false,
                    }
                    this.selfPicMsg = Object.assign({}, this.selfPicMsg, tempObj)
                }
            }
        },
        swiperSlideEnd (index, isInit = false) {
            let that = this;
            this.nowSwiperIndex = index;
            /*轮播之后对视频的处理*/
            if (this.isIphone) {
                $("video").each(function (index, ele) {
                    $('video').eq(index)[0].pause();
                });
            }
            if ($('#mySwiper>.swiper-wrapper>.swiper-slide').eq(index).find('video')) {
                if (this.isIphone) {
                    for (let value in that.$refs.fullVideo) {
                        if (that.$refs.fullVideo[value].$attrs['data-videoIndex'] == index) {
                            that.$refs.fullVideo[value].playVideo();
                        }
                    }
                }
            }
            /*这个加在这里的作用是要在播放视频的时候关掉所有swiper*/
            for (let value in that.$refs.fullSwiper) {
                that.$refs.fullSwiper[value].swiperShow = false;
                if (that.$refs.fullSwiper[value].$attrs['data-imgIndex'] == index) {
                    that.$refs.fullSwiper[value].swiperShow = true;
                    // setTimeout(() => {
                    //     if (that.$refs.fullSwiper[value].swiperMsg.imagesList.length == 1) {
                    //         that.nextSwiperSlide(4000);
                    //     }
                    // }, 100)
                }
            }
        },
        dealMeidio (msg, obj) {
            let that = this;
            let tempObj = {};
            let tempList = [];
            let videoMsg = {};
            let tempConcernTypeObj = {
                concernType: 0,
                hadConcernedUser: that.firstPageMsg.hadConcernedUser,
            }
            if (!(obj && obj.isMore)) {
                that.worksMedioList = [];
            }
            for (let data of msg) {
                if (data && data.mediaType == 1) {
                    tempList = [];
                    for (let value of data.mediaContents) {
                        tempList.push(value.url);
                    }
                    data.belongUserInfo = Object.assign({}, data.belongUserInfo, tempConcernTypeObj)
                    tempObj = {
                        imagesList: tempList,
                        belongUserInfo: data.belongUserInfo,
                        concernType: 0,//关注类型0用户1店铺
                    }
                    that.worksMedioList.push(tempObj);
                } else if (data && data.mediaType == 0) {
                    data.belongUserInfo = Object.assign({}, data.belongUserInfo, tempConcernTypeObj)
                    videoMsg = {};
                    videoMsg.videoUrl = data.mediaContents[0].url;
                    videoMsg.poster = data.poster;
                    videoMsg.belongUserInfo = data.belongUserInfo;
                    that.worksMedioList.push(videoMsg);
                }
            }
        },
        dealShareCollectSpeak (data) {
            let that = this;
            let tempObj = {};
            for (let value in data) {
                tempObj = {
                    isNeedContentShare: false,
                    visitNum: data[value].dataInfo.visitNum,
                    shareNum: data[value].dataInfo.shareNum,
                    likeNum: data[value].dataInfo.likeNum,
                    commentedNum: data[value].dataInfo.commentedNum,
                    hadLiked: data[value].queryUserBehaviorInfo.hadLikedMediaInfo,
                    mediaId: data[value].mediaId,
                    inputText: '说两句吧...',
                    penType: 2,
                };
                that.shareCollectSpeakList.push(tempObj);
            }
        },
        /*点赞*/
        isLike (obj) {
            let that = this;
            let tempObj = {};
            let hasSubKey = {};
            let hasMainkey = {};
            if (obj && obj.subKey) {
                hasSubKey = {
                    subKey: obj.subKey
                }
            }
            if (obj && obj.mainkey) {
                hasMainkey = {
                    mainkey: obj.mainkey
                }
            }
            tempObj = {
                isLike: obj.isLike || false,
                likeKey: obj.likeKey || 0,
                likeType: obj.likeType || 10,
            };
            let queryMsg = {
                userId: that.userId
            };
            Look.isLike(tempObj, queryMsg)
        },
        doComment (obj) {
            let url = '';
            let that = this;
            if (!obj.content || !obj.content.trim()) {
                this.$root.$emit('toast', { msg: "评论内容不能为空！" })
                return;
            }
            let queryMsg = {
                userId: that.userId
            };
            let paramsMsg = {
                commentType: that.commentType,
                commentKey: that.commentKey,
            }
            let callBack = {
                successCallBack () {
                    if (obj.belongType < 0) {
                        that.getUserMainComment();
                    } else {
                        /*子评论*/
                        obj.pageNum = 1;
                        that.getSubCommentList(obj);
                    }
                    if (obj && obj.cb) {
                        obj.cb();
                    }
                },
                failMsgCallBack (msg) {
                    this.$root.$emit("toast", { msg: msg });
                }
            }
            Look.doComment(obj, queryMsg, paramsMsg, callBack);

        },
        deleteComment () {

        },
        getUserMainComment (obj) {
            this.commentPageNum = obj && obj.checkCurPage ? obj.checkCurPage : 1;
            if (obj && obj.mediaId) {
                this.commentKey = obj.mediaId;
            }
            /*commentType 0:多媒体信息 1：店铺实景内容 2：店铺活动 3：店铺商品 4： 商家主页品牌*/
            let params = {
                userId: this.userId,
                commentType: this.commentType,
                commentKey: this.commentKey,
                commentPageNum: this.commentPageNum,
                commentPageSize: this.commentPageSize,
            }
            this.$store.dispatch('getUserMainCommentApi', params).then((data) => {
                if (data.success) {
                    let tempObj = { likeType: 10 };
                    if (obj && obj.isLoadingMore) {
                        /*加载更多*/
                        /*把commentListProps替换掉，里面的list push*/
                        let tempList = this.commentListProps.list;
                        tempList.push(...data.list, ...tempObj);
                        data.list = tempList;
                        this.commentListProps = Object.assign({}, this.commentListProps, data);
                    } else {
                        /*获取第一页*/
                        if (this.commentListProps && !this.commentListProps.children) {
                            this.commentListProps = Object.assign({}, this.commentListProps, data, tempObj);
                        }
                    }
                } else if (data.errMsg) {
                    this.$root.$emit({ msg: data.errMsg })
                } else {
                    this.$root.$emit({ msg: "获取页面信息失败" })
                }
            })
        },
        getSubCommentList (obj) {
            let that = this;
            let params = {
                mainId: obj.mainId,
                pageNum: obj.pageNum,
                pageSize: 5,
            }
            this.$store.dispatch('getSubCommentListApi', params).then((data) => {
                if (data.success) {
                    let tempObj = {
                        children: data,
                    }
                    /*把获取到的子评论加人到主评论对像的children里面去*/
                    for (let value in that.commentListProps.list) {
                        if (that.commentListProps.list[value].id == obj.mainId) {
                            if (obj.isMore) {
                                let tempList = that.commentListProps.list[value].children.list;
                                tempList.push(...data.list);
                                tempObj.children.list = tempList;
                                that.commentListProps.list[value] = Object.assign({}, that.commentListProps.list[value], tempObj);
                                that.commentListProps.list.splice(value, 1, that.commentListProps.list[value]);
                            } else {
                                that.commentListProps.list[value] = Object.assign({}, that.commentListProps.list[value], tempObj);
                                that.commentListProps.list.splice(value, 1, that.commentListProps.list[value]);
                            }
                            break;
                        }
                    }
                } else if (data.errMsg) {
                    this.$root.$emit({ msg: data.errMsg })
                } else {
                    this.$root.$emit({ msg: "获取页面信息失败" })
                }
            })
        },
        backHref () {
            if (window.history.length > 0) {
                window.history.go(-1);
            } else {
                this.$route.push({ path: '/home?' })
            }
        },
        /*关注*/
        doAttention (concernType) {
            if (!this.userId) {
                this.$router.push('/to/login');
                return;
            }
            let concernKey = this.visitId;
            let that = this;
            let callback = {
                successCallBack () {
                    that.firstPageMsg.hadConcernedUser = true;
                    that.firstPageMsg = Object.assign({}, that.firstPageMsg);
                    for (let value in that.$refs.userInfoHeader) {
                        that.$refs.userInfoHeader[value].productionHeader.hadConcernedUser = true;
                    }
                },
                failMsgCallBack (msg) {
                    that.$root.$emit('toast', { msg: msg })
                },
            }
            Look.doAttention(callback, this.userId, concernType, concernKey);
        },
        /*取消关注*/
        cancleAttention (concernType, concernKey) {
            let that = this;
            let callback = {
                successCallBack () {
                    that.firstPageMsg.hadConcernedUser = false;
                    that.firstPageMsg = Object.assign({}, that.firstPageMsg);
                    for (let value in that.$refs.userInfoHeader) {
                        that.$refs.userInfoHeader[value].productionHeader.hadConcernedUser = false;
                    }
                },
                failMsgCallBack (msg) {
                    that.$root.$emit('toast', { msg: msg })
                },
            }
            Look.cancleAttention(callback, this.userId, concernType, concernKey);
        },
        /*轮播图的下表变化*/
        nowIndex (index) {
            let firstIsSwiper = this.selfIntroduction && Object.keys(this.selfIntroduction).length > 0 && this.selfIntroduction && this.selfIntroduction.mediaType == 1 && this.selfPicMsg && Object.keys(this.selfPicMsg).length > 0
            let nowSwiperIndex = firstIsSwiper ? this.nowSwiperIndex : this.nowSwiperIndex - 1;
            if (this.worksList && this.worksList.length > 0) {
                this.worksList[nowSwiperIndex].swiperIndex = index;
                this.worksList.splice(nowSwiperIndex, 1, this.worksList[nowSwiperIndex]);
            }
        },
    },
    components: {
        "no-data": () => import("../../components/commonActModel/noData/NoData"),
        "user-info-header": () => import("../../components/commonActModel/header/UserInfoHeader"),
        "share-collect-speak": () => import("../../components/commonActModel/userHandleIcons/ShareCollectSpeak"),
        "full-height-video": () => import("../../components/commonActModel/video/FullHeightVideo"),
        "v-share": () => import("../../components/commonComponents/share/Share"),
        "full-height-swiper": () => import("../../components/commonComponents/swiperComponent/FullHeightSwiper"),
        // 'wx-share-body': () => import('../../components/wx/WxShareBody'),
        'wx-hide-menu': () => import('../../components/wx/WxHideMenu'),
    }
}
</script>

<style scoped lang="scss">
/*.info-banner{*/
/*height: 5rem;*/
/*height: 75vh;*/
/*}*/
.user-info {
    background-image: -webkit-linear-gradient(
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0) 70%,
        rgba(0, 0, 0, 0.3) 100%
    );
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0) 70%,
        rgba(0, 0, 0, 0.3) 100%
    );
}
.user-info /deep/ {
    .pen-icon {
        width: 0.14rem;
        margin-right: 0.1rem;
    }
    .pen-wicon {
        font-size: 0.12rem;
        height: 0.4rem;
        line-height: 0.4rem;
    }
    .scs-icon-box {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        position: relative;
        top: -50%;
        text-align: center;
        .scs-icon {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .share-num-wrap {
        display: inline-block;
        border-radius: 0.25rem;
        background-color: #8ba9e8;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 0.11rem;
        height: 0.14rem;
        line-height: 0.14rem;
        padding: 0 0.05rem;
        transform: translateX(50%);
    }
    .scs-wicon {
        height: auto;
        line-height: normal;
        padding-top: 0;
    }
}
.user-info-wmsg {
    height: 1.67rem;
    height: 25vh;
    position: relative;
    padding-top: 0.43rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
}

.user-info-back {
    height: 0.32rem;
    width: 0.32rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    right: 0.15rem;
    top: 0.15rem;
    z-index: 2;
}
.user-info-self {
    right: auto;
    left: 0.15rem;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.first-page-cmsg {
    height: 5rem;
    height: 75vh;
    overflow: hidden;
    position: relative;
}
.first-page-cmsg /deep/ .myVideo {
    height: 5rem;
    height: 75vh;
    object-fit: none;
}
.first-page-blur {
    filter: blur(40px);
    width: 100%;
}
.user-info-userheader {
    height: 0.64rem;
    width: 0.64rem;
    position: absolute;
    top: -0.42rem;
    left: 0.15rem;
    z-index: 10;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #fff;
}

.info-bottom-warp {
    font-size: 0.21rem;
    color: #333;
    margin-top: 0.3rem;
}

.user-item {
    font-size: 0.12rem;
    color: #999;
}

.info-wname {
    padding: 0 0.16rem;
}

.user-info-attention {
    width: 0.58rem;
    height: 0.25rem;
    background-color: #ff3333;
    -webkit-box-shadow: 0 0.1rem 0.1rem 0 #ffe1e1;
    -moz-box-shadow: 0 0.1rem 0.1rem 0 #ffe1e1;
    box-shadow: 0 0.1rem 0.1rem 0 #ffe1e1;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border-radius: 0.25rem;
    text-align: center;
    line-height: 0.25rem;
    font-size: 0.11rem;
    color: #fff;
}

.already-attention {
    background-color: #cccccc;
    -webkit-box-shadow: 0 0.1rem 0.1rem 0 #f9f9f9;
    -moz-box-shadow: 0 0.1rem 0.1rem 0 #f9f9f9;
    box-shadow: 0 0.1rem 0.1rem 0 #f9f9f9;
}

.add-attention-icon {
    width: 0.1rem;
}

.info-name {
    font-size: 0.18rem;
    color: #333;
}

.info-bottom-item {
    text-align: center;
}

.double-assass {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    margin: auto;
}

.double-wassass {
    position: relative;
    width: 1px;
    top: 0.2rem;
}

.shaped-img {
    position: absolute;
    top: 0.01rem;
    z-index: 1;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    left: 0;
}
.look-index-mood {
    position: absolute;
    bottom: 0;
    font-size: 0.14rem;
    color: #fff;
    padding: 0 0.16rem 0.15rem 0.16rem;
    z-index: 3;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 100%;
}
.look-index-mood-text {
    padding-bottom: 0.2rem;
}
.fc-swiper-pagination {
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 0.1rem;
    padding: 0.01rem 0.06rem;
    border-radius: 0.25rem;
}
.fc-swiper-wpagination {
    position: absolute;
    height: 0.32rem;
    top: -0.4rem;
    line-height: 0.32rem;
    right: 0.16rem;
    float: right;
    width: 0.32rem;
}
.add-des {
    width: 0.27rem;
}
.self-des-wrap {
    position: absolute;
    right: 0;
    top: -0.3rem;
    color: #fff;
    font-size: 0.12rem;
    background-color: #8ba9e8;
    border-radius: 0.03rem;
    padding: 0.03rem;
    white-space: nowrap;
}
.self-down-assass {
    position: absolute;
    bottom: 0.45rem;
    left: 50%;
    border-right: 0.03rem solid #8ba9e8;
    border-bottom: 0.03rem solid #8ba9e8;
    border-top: 0.03rem solid transparent;
    border-left: 0.03rem solid transparent;
    -webkit-transform: rotate(45deg) translateX(-50%);
    -moz-transform: rotate(45deg) translateX(-50%);
    -ms-transform: rotate(45deg) translateX(-50%);
    -o-transform: rotate(45deg) translateX(-50%);
    transform: rotate(45deg) translateX(-50%);
}
.self-des-box {
    white-space: nowrap;
    img {
        width: 100%;
        position: absolute;
        left: 0;
    }
    .self-des-text {
        position: relative;
        z-index: 1;
    }
}
/*.look-index-mood-text{*/
/*width: 100%;*/
/*padding-bottom: .2rem;*/
/*padding-left: .3rem;*/
/*padding-right: .3rem;*/
/*position: absolute!important;*/
/*bottom: 0;*/
/*z-index: 10;*/
/*color: #fff;*/
/*}*/
/*.media-comment-text {*/
/*display: inline-block;*/
/*max-width: 100%;*/
/*}*/
</style>